<template>
  <div class="equipment-item-box">
    <div style="margin-bottom: 10px">
      <span class="equipmentName">{{ item.equipmentName }}</span>
      <el-popover placement="right" width="400" @show="getAlarmList" trigger="click">
        <div
          class="display-flex justify-content-flex-justify"
          style="padding-bottom: 10px"
        >
          <div class="warning-title">设备实时报警</div>
          <el-link type="primary" @click="toWarning()">查看更多报警</el-link>
        </div>
        <el-table :data="alarmDataList" size="small">
          <el-table-column
            label="报警时间"
            align="center"
            prop="alarmTime"
          >
          </el-table-column>
          <el-table-column
            label="报警类型"
            align="center"
            :formatter="typeFormat"
            prop="alarmTypeId"
          >
          </el-table-column>
          <el-table-column label="报警信息" align="center" prop="alarmMessage">
          </el-table-column>
          <el-table-column
            label="报警状态"
            align="center"
            :formatter="statusFormat"
            prop="alarmValue"
          >
          </el-table-column>
        </el-table>
        <span slot="reference" style="cursor: pointer">
          <svg-icon
            icon-class="warning"
            :class="{ animation: item.alramDataNum > 0, 'waning-img': true }"
          />
          <span class="warning-num" v-show="item.alramDataNum > 0">{{
            item.alramDataNum
          }}</span></span
        >
      </el-popover>
      <!-- <div class="equipment-link">设备信息</div> -->
      <el-link type="primary" class="equipment-link" @click="toInfo()"
        >设备信息</el-link
      >
    </div>
    <div class="display-flex">
      <!-- <div
        :style="{
          width: '160px',
          height:'160px',
          background:
            'url(' + getNewImg(item.imageUrl) + ') no-repeat 100% 100%',
          backgroundSize: 'cover',
        }"
      ></div> -->
      <img style="width:160px;height:160px;" :src="getNewImg(item.imageUrl)"/>
      <div
        class="center-width"
        :style="{ width: clientWidth < 1441 ? '210px' : '250px' }"
      >
        <div>设备状态：{{ setStatus(parseInt(item.equipmentType)) }}</div>
        <el-tooltip
          :disabled="String(item.taskName).length < 5"
          :content="item.taskName"
          placement="top"
        >
          <div class="more-txt">当前任务：{{ item.taskName }}</div>
        </el-tooltip>
        <el-tooltip
          :disabled="String(item.taskQuantity).length < 5"
          :content="String(item.taskQuantity)"
          placement="top"
        >
          <div>零件层厚：{{ item.thickness }}<span class="num-bai" style="margin-left:5px">mm</span></div>
        </el-tooltip>
        <div>
          加工进度：
          <span
            :style="{ color: item.currentLayerFinished > 0 ? '#1890FF' : '' }"
            >{{ item.currentLayerFinished }}</span
          >/{{ item.detail }}
          <span class="num-bai">（层）</span>
        </div>
        <div>剩余时间：{{ second }}</div>
        <el-progress
          :text-inside="true"
          :stroke-width="22"
          :percentage="parseFloat(item.productionStatus)"
        ></el-progress>
      </div>
      <div style="line-height: 30px; margin-left: 10px" class="flex: 1;">
        <div><span style="width:14px;display:inline-block"></span>氧含量：{{ item.oxygen }}%</div>
        <div>舱室压力：{{ item.cabinPressure }}mbar</div>
        <div>滤网压差：{{ item.filterPressureDiff }}mbar</div>
        <div>风机流速：{{ item.fanFlux }}m/s</div>
        <div>基板温度：{{ item.buildCylinderTemperature }}℃</div>
        <div>管道温度：{{ item.fanPipeTemp }}℃</div>
      </div>
    </div>
  </div>
</template>

<script>
import { listWithPage } from "@/api/equipment/alarmData";
import { formatSeconds } from "@/utils/index";
export default {
  props: [
    "item",
    "statusOptions",
    "remaining",
    "clientWidth",
    "alarmTypeOptions",
    "alarmStatusOptions",
  ],
  data() {
    return {
      newImg: require("@/assets/404_images/no-img.jpg"),
      list: [],
      alarmDataList: [],
      timer: null,
      second: "0",
      newValue: null,
      queryParams: {
        pageNum: 1,
        pageSize: 5,
        equipmentId: this.item.equipmentId,
        startTime: null,
        endTime: null,
        alarmTypeIds: null,
        alarmValue: 1, //报警中ing..
      },
    };
  },
  mounted(){
    this.second = this.formatSeconds(this.remaining);
  },
  watch: {
    remaining(newValue) {
      let _this = this;
      this.newValue = newValue;
      this.second = this.formatSeconds(this.newValue);
      clearInterval(_this.timer);
      _this.timer = setInterval(() => {
        _this.newValue = parseFloat(_this.newValue) - 1;
        if (_this.newValue == -1) {
          clearInterval(_this.timer);
          return;
        }
        _this.second = _this.formatSeconds(_this.newValue);
      }, 1000);
    },
  },
  methods: {
   
    formatSeconds:formatSeconds,
    typeFormat(row, column) {
      return this.selectDictLabel(this.alarmTypeOptions, row.alarmTypeId);
    },
    statusFormat(row, column) {
      return this.selectDictLabel(this.alarmStatusOptions, row.alarmValue);
    },
    getNewImg(url) {
      if (!url) return this.newImg;
      else return url;
    },
    handleError(e) {
      this.item.imageUrl = this.img;
    },
    // 报警数据
    getAlarmList() {
      listWithPage(this.queryParams).then((response) => {
        this.alarmDataList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    setStatus(status) {
      return this.selectDictLabel(this.statusOptions, status);
    },
    toInfo() {
      this.$router.push({
        path: "equipment/info",
        query: {
          equipmentName: this.item.equipmentName,
          equipmentId: this.item.equipmentId,
        },
      });
    },
    toWorking() {
      this.$router.push({
        path: "technology/technology",
        query: {
          equipmentName: this.item.equipmentName,
          equipmentId: this.item.equipmentId,
        },
      });
    },
    toTask() {
      this.$emit("task", this.item.equipmentId);
    },
    toWarning() {
      this.$router.push({
        path: "equipment/alarmData",
        query: {
          equipmentId: this.item.equipmentId,
        },
      });
    },
  },
};
</script>

<style  scoped>
.equipment-item-box {
  width: 100%;
  padding: 10px;
  margin-bottom: 40px;
  border-radius: 4px;
  box-shadow: 0 0 9px 2px #aaa;
  font-size: 14px;
  position: relative;
}
.equipmentName {
  font-weight: bold;
  font-size: 16px;
  margin-right: 10px;
}
.item-q /deep/ .el-progress-bar {
  background: #aaa;
}
@-webkit-keyframes scaleout {
  0% {
    -webkit-transform: scale(1);
    color: #ce7f56;
    opacity: 0.5;
  }
  100% {
    -webkit-transform: scale(1.1);
    color: #da6a31;
    opacity: 1;
  }
}
@keyframes scaleout {
  0% {
    transform: scale(1);
    -webkit-transform: scale(1);
    color: #ce7f56;
    opacity: 0.5;
  }
  100% {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    opacity: 1;
    color: #da6a31;
  }
}

.warning-num {
  color: #ce642e;
  margin-left: 3px;
  font-weight: bold;
}
.waning-img {
  /* width: 22px; */
  font-size: 17px;
  position: relative;
  background: transparent;
  top: -2px;
  color: #1890ff;
}
.animation {
  -webkit-animation: scaleout 0.6s infinite;
  animation: scaleout 0.6s infinite;
}
.equipment-link {
  position: absolute;
  right: 15px;
  top: 12px;
}
.num-bai {
  color: #aaa;
  position: relative;
  font-size: 13px;
  top: -1px;
}
.warning-title {
  font-size: 15px;
  font-weight: bold;
}
.more-txt {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
}
.center-width {
  line-height: 30px;
  width: 210px;
  margin-left: 10px;
}
</style>